<template>
	<view>
		<!-- <free-nav-bar title="通知公告" showBack></free-nav-bar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<view class="pl-3 dfex pr-3 lineHight-3 border-f5f5f5"
				v-for="(notice, index) in notices" :key="index" @click="getDiClick(notice.id)">
				<view class="dfes">
					<view v-if="!notice.isRead" @click="readNotice(index)"
						style="color: #FF0000; padding-right: 5px;">●</view>
					<view class="wrap" @click="readNotice(index)"
						:style="{ color: notice.isRead ? '#999999' :  '#333','flex':'1'}">{{ notice.title }}</view>
				</view>
				<view
					:style="{ color: notice.isRead ? '#999999' :  '#333','font-size':'0.9em'}">{{notice.updateTime.slice(0, 10)}}</view>
			</view>
			<view v-if="!hasMore && notices.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && notices.length === 0" class="text-center mt-3 mb-3">
				<view class="text-muted">暂无数据</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $T from '@/common/free-lib/time.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				notices: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
			}
		},
		onPullDownRefresh() {
			this.notices = [];
			this.form.pageNo = 1;
			this.getNoticeList();
		},
		onShow() {
			this.getNoticeList();
			this.notices = [];
		},
		onReachBottom() {
			this.pageNo = this.form.pageNo + 1;
			this.getNoticeList();
		},
		methods: {
			readNotice(index) {
				this.notices[index].isRead = true; // 点击浏览后将未读状态设置为已读
			},
			getDiClick(id) {
				uni.navigateTo({
					url: '/pages/tabbar/index/NewListDi?id=' + id
				})
			},
			getNoticeList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/basisInform/platformNotice/upper/list', {
						...this.form
					}, {})
					.then(res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.result.records.length == 0) {
							uni.showToast({
								title: '没有更多啦！',
								icon: 'success'
							});
							return;
						}
						const noticeList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							if (res.result.records[i].title) {
								noticeList.push({
									id: res.result.records[i].id,
									title: res.result.records[i].title,
									isRead: res.result.records[i].isRead,
									updateTime: $T.parseTime(res.result.records[i].updateTime, "{y}-{m}-{d}"),
								});
							}
						}
						this.notices = res.result.records,
						this.form.total = res.result.total;
						this.hasMore = this.notices.length < this.form.total;
					})
					.catch(error => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						console.error('请求出错', error); // 处理任何错误  
					});
			},
			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.getNoticeList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.notices = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.getNoticeList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
		}
	}
</script>
<style>
</style>